<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="ptb10 plr30" @click="bindSubmit()">
				<view class="btn1">提交</view>
			</view>
		</view>
		<view class="container">
			<view class="ptb20 plr30">
				<view class="box1">
					<view class="item1 flex-box" @click="chooseImage">
						<view class="flex-grow-1 fs30 col5">点击更换照片</view>
						<image :src="model.avatar||'https://admin.mosizp.cn/static/public/avatar.png'" mode="aspectFill" class="user_img">
						</image>
					</view>
					<view class="item2 flex-box">
						<view class="fs30 col5 left">*真实姓名</view>
						<input type="text" placeholder="请输入" v-model="model.realname"
							class="flex-grow-1 tr fs28 col1 pl20" placeholder-class="cola" />
					</view>
					<multi-select :items="genders" @change="bindGenderChange" id_key="id" name_key="name"
						:value="model.gender">
						<view class="item2 flex-box">
							<view class="fs30 col5 left">*性别</view>
							<view class="flex-grow-1 tr fs28 pl20"
								:class="[getListItemById(genders,model.gender)?'col1':'cola']">
								{{getListItemAttrById(genders,model.gender,'name','请选择')}}
							</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<picker mode="date" :value="date" :end="endDate" @change="bindDateChange">
						<view class="item2 flex-box">
							<view class="fs30 col5 left">出生年份</view>
							<view class="flex-grow-1 tr fs28 pl20" :class="[model.birthdate?'col1':'cola']">
								{{model.birthdate?model.birthdate:'请选择'}}
							</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</picker>

					<multi-select :items="maritals" @change="bindMaritalChange" id_key="id" name_key="name"
						:value="model.marital">
						<view class="item2 flex-box">
							<view class="fs30 col5 left">婚姻状况</view>
							<view class="flex-grow-1 tr fs28 pl20"
								:class="[getListItemById(maritals, model.marital)?'col1':'cola']">
								{{getListItemAttrById(maritals, model.marital,'name','请选择')}}
							</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<multi-select :items="educationLevels" @change="bindEducationChange" id_key="id" name_key="name"
						:value="model.education_level_id">
						<view class="item2 flex-box">
							<view class="fs30 col5 left">*学历</view>
							<view class="flex-grow-1 tr fs28 pl20"
								:class="[getListItemById(educationLevels,model.education_level_id)?'col1':'cola']">
								{{getListItemAttrById(educationLevels,model.education_level_id,'name','请选择')}}
							</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<multi-select :items="workExperienceOptions" @change="bindWorkExperienceChange" id_key="id"
						name_key="name" :value="model.work_experience_id">
						<view class="item2 flex-box">
							<view class="fs30 col5 left">*工作年限</view>
							<view class="flex-grow-1 tr fs28 pl20"
								:class="[getListItemById(workExperienceOptions,model.work_experience_id)?'col1':'cola']">
								{{getListItemAttrById(workExperienceOptions,model.work_experience_id,'name','请选择')}}
							</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<multi-select :items="workStates" @change="bindWorkStateChange" id_key="id" name_key="name"
						:value="model.current_state_id">
						<view class="item2 flex-box">
							<view class="fs30 col5 left">求职状态</view>
							<view class="flex-grow-1 tr fs28 pl20"
								:class="[getListItemById(workStates,model.current_state_id)?'col1':'cola']">
								{{getListItemAttrById(workStates,model.current_state_id,'name','请选择')}}
							</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
					<multi-select :items="areas" max_level="2" @change="bindHukouCityChange" id_key="id" name_key="name"
						:value="model.hukou_city">
						<view class="item2 flex-box">
							<view class="fs30 col5 left">籍贯</view>
							<view class="flex-grow-1 tr fs28 pl20" :class="[model.hukou_city?'col1':'cola']">
								{{model.hukou_city?model.hukou_city:'请选择'}}
							</view>
							<image src="https://admin.mosizp.cn/static/public/arrow-r.png" mode="widthFix" class="ico10 mt5 ml10"></image>
						</view>
					</multi-select>
				</view>

				<view class="mt20 box1">
					<view class="item2 flex-box" style="border-top: none;">
						<view class="fs30 col5 left">*联系电话</view>
						<input type="text" maxlength="11" placeholder="请输入" v-model="model.mobile"
							class="flex-grow-1 tr fs28 col1 pl20" placeholder-class="cola" />
					</view>
					<view class="item2 flex-box">
						<view class="fs30 col5 left">*联系邮箱</view>
						<input type="text" placeholder="请输入" v-model="model.email" class="flex-grow-1 tr fs28 col1 pl20"
							placeholder-class="cola" />
					</view>
					<!-- <view class="item2 flex-box">
						<view class="fs30 col5">*地址</view>
						<input type="text" placeholder="请输入" v-model="model.current_address"
							class="flex-grow-1 tr fs28 col1 pl20" placeholder-class="cola" />
					</view> -->
				</view>
				<!-- <view class="mt20 box1">
					<view class="item2 flex-box" style="border-top: none;">
						<view class="fs30 col5 left">微信</view>
						<input type="text" placeholder="请输入" v-model="model.wx" class="flex-grow-1 tr fs28 col1 pl20"
							placeholder-class="cola" />
					</view>
					<view class="item2 flex-box">
						<view class="fs30 col5 left">个人网站</view>
						<input type="text" placeholder="请输入" v-model="model.web" class="flex-grow-1 tr fs28 col1 pl20"
							placeholder-class="cola" />
					</view>

				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	export default {
		components: {
			multiSelect
		},
		data() {
			return {

				endDate: this.formatDatetime(new Date(), 'yyyy-mm-dd'),
				userinfo: {},
				model: {
					avatar: '',
					realname: '',
					gender: '',
					education_level_id: '',
					work_experience_id: '',
					current_state_id: '',
					nation_id: 0,
					politic_id: 0,
					mobile: '',
					email: '',
					current_address: '',
					wx: '',
					web: ''
				},
				genders: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				selectGender: null,
				maritals: [{
					id: 1,
					name: '已婚'
				}, {
					id: 2,
					name: '未婚'
				}],
				educationLevels: [],
				selectEducation: null,
				workExperienceOptions: [],
				areas: [],
				nations: [],
				politic: [],
				workStates: [],
				date: '',
				maritals: [{
					id: 1,
					name: '已婚'
				}, {
					id: 2,
					name: '未婚'
				}],
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			this.getOpenerEventChannel().on('dataTransfer', data => {
				this.model = Object.assign({}, data.model); //创建一份浅拷贝, 不影响上一页的值

				//学历
				this.$util.getEducationLevels(false, false).then(items => {
					items.splice(0, 1);
					this.educationLevels = items;
				});
				this.$util.getWorkExperienceOptions().then(items => {
					items.splice(0, 1);
					this.workExperienceOptions = items;
				});
				this.$forceUpdate();

			});
			this.$util.getWorkStates().then(items => {
				this.workStates = items;
			});
			this.$util.getAreasTree(2, false).then(items => {
				this.areas = items;
			});
			this.userinfo = this.$core.getUserinfo();
		},
		methods: {
			bindDateChange: function(e) {
				this.model.birthdate = e.detail.value
			},
			chooseImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						let file = res.tempFiles[0];
						// #ifdef H5
						that.$core.uploadFileH5({
							filePath: file.path,
							success: (ret, response) => {
								that.model.avatar = ret.data.url;
							}
						});
						//#endif
						//#ifdef MP-WEIXIN
						that.$core.uploadFile({
							filePath: file.path,
							success: (ret, response) => {
								that.model.avatar = ret.data.url;
							}
						});
						//#endif
					}
				});
			},
			//性别
			bindGenderChange(e) {
				let index = e.indexValues;
				this.model.gender = this.genders[index[0]].id;
			},
			//学历
			bindEducationChange(e) {
				let index = e.indexValues;
				this.model.education_level_id = this.educationLevels[index[0]].id;
			},

			//工作经验
			bindWorkExperienceChange(e) {
				let index = e.indexValues;
				this.model.work_experience_id = this.workExperienceOptions[index[0]].id;
			},
			bindWorkStateChange(e) {
				let index = e.indexValues;
				this.model.current_state_id = this.workStates[index[0]].id;
			},
			//婚姻状态
			bindMaritalChange(e) {
				let index = e.indexValues;
				this.model.marital = this.maritals[index[0]].id;
			},
			 //籍贯
			bindHukouCityChange(e) {
				let index = e.indexValues;
				this.model.hukou_city = this.areas[index[0]].name + this.areas[index[0]].children[index[1]].name;
			},

			bindSubmit() {
				let data = this.model;
				var rule = [{
						name: 'realname',
						nameChn: '姓名',
						rules: ['require'],
						errorMsg: {
							require: '请填写姓名'
						}
					},
					{
						name: 'gender',
						nameChn: '性别',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '性别必须选择',
							gt: "性别必须选择"
						}
					},
					{
						name: 'education_level_id',
						nameChn: '学历',
						rules: ['require', 'gt:0'],
						errorMsg: {
							require: '学历必须选择',
							gt: "学历必须选择"
						}
					},{
						name: 'work_experience_id',
						nameChn: '工作年限',
						rules: ['require'],
						errorMsg: {
							require: '工作年限必须选择'
						}
					},
					{
						name: 'mobile',
						nameChn: '手机号',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '请填写手机号',
							mobile: '请填写正确的手机号'
						}
					},
					{
						name: 'email',
						nameChn: '邮箱',
						rules: ['require', 'email'],
						errorMsg: {
							require: '请填写邮箱',
							email: '请填写正确的邮箱'
						}
					},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				data.module = 'personal_info';
				this.$core.post({
					url: 'xilujob.user/save_module',
					data: data,
					success: ret => {
						this.getOpenerEventChannel().emit('dataTransfer', {
							model: ret.data.model,
							complete_percent: ret.data.complete_percent
						});
						uni.navigateBack();
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box1 {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 0 30rpx;

		.item1 {
			height: 168rpx;
		}

		.item2 {
			height: 121rpx;
			border-top: 1px solid #EEEEEE;
		}

		.user_img {
			width: 120rpx;
			height: 120rpx;
			display: block;
			border-radius: 50%;
		}
	}

	.ico10 {
		width: 10rpx;
	}

	.left {
		width: 120rpx;
		text-align-last: justify;
		white-space: nowrap
	}
</style>